Migrate edit product to inertia #3255

sahitya-chandra · 2026-01-30T16:12:34Z

Issue: #3030
Closes #3030
Parent issue: #3028
previous pr: #3096 and #3166 and #3202

Description

Problem

The Edit Product page (/products/:id/edit) used a single React on Rails server-rendered flow with one monolithic LinksController#edit and LinksController#update. All tabs (Product, Content, Receipt, Share) were handled via params[:tab], causing full page reloads when switching tabs and sending unnecessary data for each tab.

Solution

Migrated the Edit Product page to Inertia with per-tab server endpoints, matching the pattern used in merged PRs (Bundles #3173).

Approach:

Dedicated controller per tab – Each tab has its own GET (edit) and PATCH/PUT (update) endpoint with resource-style URLs:
- Product → /products/:id/product/edit → Products::Edit::ProductController
- Content → /products/:id/content/edit → Products::Edit::ContentController
- Receipt → /products/:id/receipt/edit → Products::Edit::ReceiptController
- Share → /products/:id/share/edit → Products::Edit::ShareController
- Backward-compatibility redirects for old URLs (e.g. /products/:id/edit → /products/:id/product/edit).
Decoupled props per tab – Each edit page receives only the props it needs. Products::Edit::BasePresenter provides:
- layout_props – shared top-level props (id, unique_permalink, seller, currency_type, taxonomies, etc.) with no product.
- Tab-specific product props: product_tab_product_props (full product for Product tab), content_tab_product_props (name, files, rich_content, variants, etc.), receipt_tab_product_props (name, custom_receipt_text, custom_view_content_button_text, etc.), share_tab_product_props (name, tags, taxonomy_id, display_product_reviews, is_adult, custom_domain, etc.). Each tab presenter merges layout_props with its tab’s product hash so Content/Receipt/Share do not receive pricing, refund, or other unrelated fields.
Inertia pages – One page component per tab under app/javascript/pages/Products/Edit/ (Product.tsx, Content.tsx, Receipt.tsx, Share.tsx), with a shared ProductEditLayout.tsx using Inertia’s useForm() for save.
Dual Inertia + JSON – Product edit controllers support both:
- Inertia: form.patch() from the "Save changes" button → redirect + flash.
- JSON: Non-Inertia callers → { success: true }.
Publish/unpublish in LinksController support both: Inertia — "Save and continue" / "Unpublish" call save() (form.patch) then router.post(), with server-side flash ("Published!" / "Unpublished!"); JSON — for other callers.
Cleanup – Removed old React on Rails entry: packs/product_edit.ts, views/links/edit.html.erb, ProductEditPage.tsx server component, and the monolithic edit/update actions from LinksController.

Key files:

app/controllers/products/edit/base_controller.rb – Base for all tab controllers, layout "inertia".
app/controllers/products/edit/*_controller.rb – Tab-specific edit/update with request.inertia? for dual response.
app/presenters/products/edit/base_presenter.rb – layout_props and tab-specific product prop methods; tab presenters compose props per tab.
app/presenters/products/edit/*_tab_presenter.rb – Each returns layout_props.merge(product: <tab>_tab_product_props).
app/javascript/layouts/ProductEditLayout.tsx – Inertia layout with useForm(), form.patch() for save.
app/javascript/pages/Products/Edit/*.tsx – Per-tab Inertia pages.
app/javascript/components/ProductEdit/Layout.tsx – Tab chrome, Save/Publish/Unpublish; uses Inertia Link/router.visit and router.post for publish/unpublish.
app/policies/link_policy.rb – Permitted attributes split into *_tab_permitted_attributes per tab.

Other changes:

config/initializers/react_on_rails.rb – controller.params = ActionController::Parameters.new(params) so React on Rails SSR (e.g. checkout) works with strong parameters. Pre-existing bug fix, not specific to this migration.
app/javascript/packs/inertia.js – CSRF token set on requestDefaults.headers for non-Inertia AJAX (image uploads, tag suggestions) from Product Edit components.

Before / After

Before: One route, one controller, one React on Rails app; tab switch = full reload; all tab data sent every time.

Screencast.from.2026-01-28.19-04-58.webm

After: One URL per tab, one controller and presenter per tab; tab switch = Inertia SPA navigation; each tab gets only its data.

Screencast.from.2026-01-30.22-02-04.webm

Implementation notes

Routes: Resource-style routes under resources :products with per-tab resource for edit/update (edit_product_product_path, etc.). No explicit path: "product"; default path is used. Backward-compatibility redirects for legacy URLs.
Flash & redirects: Success/error redirects pass notice:/alert: in the redirect and use status: :see_other (303). No separate flash assignment before redirect.
Unpublish: When the user clicks Unpublish on Product or Content tab, the action short-circuits and only unpublishes (no full tab update) so the request works when the frontend sends only { unpublish: true } and to avoid membership tier validation. Share tab runs update in transaction then unpublish; Receipt tab uses LinksController#unpublish POST.
Error handling: Method-level rescue at the end of each update action (no begin/rescue). All error redirects use status: :see_other.
Product::VariantsUpdaterService: price_difference_cents can be nil when not sent (e.g. non-coffee variant) or blank; .to_i coerces string params from forms. Comment added in the service.

Test results

Product edit controllers: 33 examples in spec/controllers/products/edit/ (Product, Content, Receipt, Share; GET edit + PATCH update, authorize/collaborator, tab-specific behavior).
Product edit presenters: 6 examples in spec/presenters/products/edit/ (BasePresenter layout_props/product_minimal_props; ProductTabPresenter, ContentTabPresenter, ReceiptTabPresenter, ShareTabPresenter each return layout props + tab-specific product props only).
Publish/unpublish: Covered by spec/controllers/links_controller_spec.rb (POST publish at line 51, POST unpublish at line 162). Total: 33 controller + 6 presenter + 15 publish/unpublish = 54 examples for this migration.

Run:

bundle exec rspec spec/controllers/products/edit/ spec/presenters/products/edit/ spec/controllers/links_controller_spec.rb:51 spec/controllers/links_controller_spec.rb:162 --format documentation

Checklist

I have read the contributing guidelines
I have watched Gumroad PR review livestreams
I have performed a self-review and left review comments on my PR
I have added/updated tests for my changes

AI Disclosure

used cursor with opus-4.5 to plan the solution and refactoring code
AI was also used to:

Generate the initial boilerplate for the 4 new controllers and presenters.
Refactor LinkPolicy to split permitted attributes.
Write the rspec test suite for the new controllers.
Assist in migrating the saveProduct frontend logic to use dynamic Inertia endpoints.

…ess` before_action in links controller.

…to-inertia

- Extract shared permitted attributes in LinkPolicy for better maintainability. - Update routes for product editing to include separate paths for each tab (product, content, receipt, share). - Enhance controller specs to support both Inertia and JSON API requests for product updates across all tabs.

…ontrollers

- Convert publish/unpublish to use Inertia router.post() instead of legacy AJAX saveProduct/setProductPublished utilities - Remove JSON rendering from product edit controllers (now Inertia-only) - Update save() in ProductEditLayout to return Promise for proper sequencing with publish - Add Inertia support to links_controller publish/unpublish actions with flash messages and redirects - Remove JSON API tests from controller specs (now 9 tests) - Clean up unused imports in Layout.tsx This addresses reviewer feedback about using server-side flash messages instead of client-side showAlert for success/error handling.

- Add tests for publish with Inertia request (redirect + flash notice) - Add tests for publish error handling with Inertia (flash error) - Add tests for unpublish with Inertia request (redirect + flash notice) - Add basic unpublish JSON test for completeness

…uting

…ontrollers - Implemented shared examples for authorization checks in Products::Edit::ContentController, Products::Edit::ProductController, Products::Edit::ReceiptController, and Products::Edit::ShareController. - Added tests to ensure collaborators can access update actions in the respective controllers. - Enhanced existing tests to cover additional scenarios, including handling of product attributes and settings.

Resolved conflicts: - app/controllers/links_controller.rb: keep branch (no edit/update; handled by Products::Edit::*) - app/policies/link_policy.rb: add update_purchases_content? from main, keep shared_tab_permitted_attributes - spec/controllers/links_controller_spec.rb: keep branch (no GET edit / PUT update specs)

…ia compatibility

…c product props for each tab

sahitya-chandra · 2026-01-30T16:16:08Z

app/presenters/products/edit/base_presenter.rb

Each edit tab now gets only the product props it needs: Product tab gets full product; Content gets name, files, rich_content, variants, etc.; Receipt gets receipt/custom text fields; Share gets tags, taxonomy_id, display_product_reviews, is_adult, custom_domain. Layout still gets shared top-level props via layout_props (no product). This avoids sending pricing/refund/share data to tabs that don’t use it.

sahitya-chandra · 2026-01-30T16:17:13Z

config/routes.rb

+        resource :product, only: [:edit, :update], controller: "edit/product"
+        resource :content, only: [:edit, :update], controller: "edit/content"
+        resource :receipt, only: [:edit, :update], controller: "edit/receipt"


Dropped path: "product" from the product resource; the default path for a singular :product resource is already "product", so behavior is unchanged and the config is simpler.

sahitya-chandra · 2026-01-30T16:17:58Z

app/services/product/variants_updater_service.rb

            # TODO: :product_edit_react cleanup
            if option[:price_difference_cents].present?
-              option[:price] = option[:price_difference_cents]
+              option[:price] = option[:price_difference_cents].to_i


price_difference_cents can be nil when not sent (e.g. non-coffee variant) or blank, and that .to_i is used to coerce string params from forms. The existing .present? guard and .to_i logic are unchanged.

sahitya-chandra · 2026-01-30T16:19:23Z

spec/presenters/products/edit/base_presenter_spec.rb

Added specs to ensure each tab presenter returns layout props plus only that tab’s product keys (e.g. Content/Receipt/Share do not include price_cents, refund_policy). BasePresenter specs cover layout_props (no product) and product_minimal_props (name, is_published, files, native_type).

sahitya-chandra

self review

sahitya-chandra · 2026-02-02T14:20:28Z

@EmCousin sir,

I have incorporated your review comments in #3202. Could you take another look when you have time? Thanks.

Cc @Pradumn27

EmCousin · 2026-02-03T08:17:37Z

app/controllers/products/edit/base_controller.rb

+        def fetch_product
+          product_id = params[:product_id] || params[:id]
+          @product = Link.fetch_leniently(product_id, user: current_seller) || Link.fetch_leniently(product_id)
+          raise(ActiveRecord::RecordNotFound) if @product.nil? || @product.archived? || @product.deleted_at.present?


We want to be able to edit archived products? What is the reason you added this constraint here? Right now it breaks the behaviour when I want to click on Edit in the Archived products list

EmCousin · 2026-02-03T08:19:40Z

config/routes.rb

  get "/s3_utility/generate_multipart_signature", to: "s3_utility#generate_multipart_signature"

  constraints GumroadDomainConstraint do
+    resources :products, only: [], param: :id do


This is already the case by default.

Suggested change

resources :products, only: [], param: :id do

resources :products, only: [] do

EmCousin · 2026-02-03T08:21:55Z

app/presenters/products/edit/base_presenter.rb

+module Products
+  module Edit
+    class BasePresenter


We do not nest modules/classes in this code base, the general style is to declare those inline (class Products::Edit::BasePresenter)

EmCousin · 2026-02-03T08:25:31Z

app/controllers/products/edit/base_controller.rb

+        end
+
+        def fetch_product
+          product_id = params[:product_id] || params[:id]


Again, there is no case where the product_id will be present in params[:id] when hitting the child controllers' endpoints, it will always be in params[:product_id]

EmCousin · 2026-02-03T08:32:48Z

app/presenters/products/edit/base_presenter.rb

+      end
+
+      # Full product hash for the Product tab only.
+      def product_tab_product_props


This should be defined in ProductTabPresenter

EmCousin · 2026-02-03T08:39:34Z

app/controllers/products/edit/content_controller.rb

+  module Edit
+    class ContentController < BaseController
+      def edit
+        render inertia: "Products/Edit/Content", props: Products::Edit::ContentTabPresenter.new(product: @product, pundit_user:).props


Ref. comment above, the template should be Products/Content/Edit

EmCousin · 2026-02-03T08:46:14Z

app/javascript/layouts/ProductEditLayout.tsx

+  ProfileSection,
+  ShippingCountry,
+} from "$app/components/ProductEdit/state";
+


There is still a lot of tight coupling in this layout, there should be conditionals in there do determine what to do depending on which pages we are on. Each page should instead have their own edit props, their own form object and their own update function

EmCousin · 2026-02-03T08:47:09Z

app/javascript/layouts/ProductEditLayout.tsx

+      const pathname = window.location.pathname;
+      let updateUrl: string;
+      if (pathname.includes("/content/edit")) updateUrl = Routes.product_content_path(uniquePermalink);
+      else if (pathname.includes("/receipt/edit")) updateUrl = Routes.product_receipt_path(uniquePermalink);
+      else if (pathname.includes("/share/edit")) updateUrl = Routes.product_share_path(uniquePermalink);
+      else updateUrl = Routes.product_product_path(uniquePermalink);


We should not be determining the endpoint url in the layout based on conditionals, instead each edit page should have their own update function

EmCousin · 2026-02-03T08:51:09Z

app/javascript/components/ProductEdit/Layout.tsx

  const setPublished = async (published: boolean) => {
-    try {
-      setIsPublishing(true);
-      await saveProduct(uniquePermalink, id, product, currencyType);
-      await setProductPublished(uniquePermalink, published);
-      updateProduct({ is_published: published });
-      showAlert(published ? "Published!" : "Unpublished!", "success");
-      if (tab === "share") {
-        if (product.native_type === "coffee") navigate.current(rootPath);
-        else navigate.current(`${rootPath}/content`);
-      } else if (published) {
-        navigate.current(`${rootPath}/share`);
+    setIsPublishing(true);
+    if (published) {
+      try {
+        await save();
+      } catch {
+        setIsPublishing(false);
+        return;
+      }
+    }
+
+    if (published) {
+      router.post(Routes.publish_link_path(uniquePermalink), {}, {
+        preserveScroll: true,
+        onSuccess: () => updateProduct({ is_published: true }),
+        onFinish: () => setIsPublishing(false),
+      });
+    } else {
+      // Unpublish: use current tab's update URL with unpublish (like bundles)
+      if (tab === "product" || tab === "content" || tab === "share") {
+        const unpublishUrl =
+          tab === "product"
+            ? Routes.product_product_path(uniquePermalink)
+            : tab === "content"
+              ? Routes.product_content_path(uniquePermalink)
+              : Routes.product_share_path(uniquePermalink);
+        router.visit(unpublishUrl, {
+          method: "patch",
+          data: { unpublish: true },
+          preserveScroll: true,
+          onSuccess: () => updateProduct({ is_published: false }),
+          onFinish: () => setIsPublishing(false),
+        });
+      } else {
+        router.post(Routes.unpublish_link_path(uniquePermalink), {}, {
+          preserveScroll: true,
+          onSuccess: () => updateProduct({ is_published: false }),
+          onFinish: () => setIsPublishing(false),
+        });
      }
-    } catch (e) {
-      assertResponseError(e);
-      showAlert(e.message, "error", { html: true });
    }
-    setIsPublishing(false);
  };


This does not make sense. Publishing/Unpublishing a product is now part of the update function by passing either publish or unpublish to the request's body, then we told the backend what to do based on the presence or absence of those values. You should not be needing the publish_link_path nor the unpublish_link_path at all. Again, look how it's done for updating a bundle.

EmCousin · 2026-02-03T08:52:10Z

app/controllers/links_controller.rb

  def unpublish
    authorize @product

    @product.unpublish!
-    render json: { success: true }
+
+    if request.inertia?
+      flash[:notice] = "Unpublished!"
+      redirect_to product_edit_redirect_url
+    else
+      render json: { success: true }
+    end
  end

  def publish
    authorize @product

    if @product.user.email.blank?
-      return render json: { success: false, error_message: "<span>To publish a product, we need you to have an email. <a href=\"#{settings_main_url}\">Set an email</a> to continue.</span>" }
+      error_message = "<span>To publish a product, we need you to have an email. <a href=\"#{settings_main_url}\">Set an email</a> to continue.</span>"
+      if request.inertia?
+        flash[:alert] = error_message.html_safe
+        return redirect_back fallback_location: edit_product_product_path(@product.unique_permalink)
+      else
+        return render json: { success: false, error_message: }
+      end
    end

    begin
      @product.publish!
    rescue Link::LinkInvalid, ActiveRecord::RecordInvalid
-      return render json: { success: false, error_message: @product.errors.full_messages[0] }
+      error_message = @product.errors.full_messages[0]
+      if request.inertia?
+        flash[:alert] = error_message
+        return redirect_back fallback_location: edit_product_product_path(@product.unique_permalink)
+      else
+        return render json: { success: false, error_message: }
+      end
    rescue => e
      Bugsnag.notify(e)
-      return render json: { success: false, error_message: "Something broke. We're looking into what happened. Sorry about this!" }
+      error_message = "Something broke. We're looking into what happened. Sorry about this!"
+      if request.inertia?
+        flash[:alert] = error_message
+        return redirect_back fallback_location: edit_product_product_path(@product.unique_permalink)
+      else
+        return render json: { success: false, error_message: }
+      end
    end

-    render json: { success: true }
+    if request.inertia?
+      flash[:notice] = "Published!"
+      redirect_to edit_product_share_path(@product.unique_permalink)
+    else
+      render json: { success: true }
+    end
  end


These endpoints should not be used anymore since publishing/unpublishing is part of the update action in each products edit page

sahitya-chandra added 19 commits January 27, 2026 01:09

feat(products): migrate Edit Product page to Inertia

f592af0

refactor: Exclude update action from `fetch_product_and_enforce_acc…

bca67ce

…ess` before_action in links controller.

Merge remote-tracking branch 'origin/main' into migrate-edit-product-…

122c1b8

…to-inertia

refactor: remove legacy update logic and comments from product edit c…

0278c37

…ontrollers

revert: remove unrelated config changes

268e84f

fix(react_on_rails): wrap params in ActionController::Parameters for SSR

fd82986

refactor: migrate product edit functionality to Inertia and update ro…

8c0d5ef

…uting

Merge branch 'main' into migrate-edit-product-to-inertia

d0af2ea

refactor: Update product edit routes and controller actions for Inert…

00e8d0c

…ia compatibility

Merge origin/main into migrate-edit-product-to-inertia

db73e2e

small ref

b8c976d

Merge branch 'main' into migrate-edit-product-to-inertia

41aa258

Merge branch 'main' into migrate-edit-product-to-inertia

a75d12a

Refactor product presenters to use layout_props and introduce specifi…

ffe1c9b

…c product props for each tab

sahitya-chandra had a problem deploying to ci-protected January 30, 2026 16:12 — with GitHub Actions Error

Merge branch 'main' into migrate-edit-product-to-inertia

50325b6

sahitya-chandra had a problem deploying to ci-protected January 30, 2026 16:12 — with GitHub Actions Error

sahitya-chandra commented Jan 30, 2026

View reviewed changes

neetogit-bot bot assigned EmCousin and Pradumn27 and unassigned EmCousin Jan 30, 2026

Merge branch 'main' into migrate-edit-product-to-inertia

8a01440

sahitya-chandra had a problem deploying to ci-protected January 31, 2026 08:54 — with GitHub Actions Error

Merge branch 'main' into migrate-edit-product-to-inertia

b0f2de3

sahitya-chandra had a problem deploying to ci-protected January 31, 2026 20:05 — with GitHub Actions Error

Merge branch 'main' into migrate-edit-product-to-inertia

d29201e

sahitya-chandra had a problem deploying to ci-protected February 1, 2026 13:22 — with GitHub Actions Error

neetogit-bot bot assigned EmCousin and unassigned Pradumn27 Feb 1, 2026

Merge branch 'main' into migrate-edit-product-to-inertia

ef4f490

sahitya-chandra requested a deployment to ci-protected February 2, 2026 13:24 — with GitHub Actions Waiting

EmCousin requested changes Feb 3, 2026

View reviewed changes

	resources :products, only: [], param: :id do
	resources :products, only: [] do

Migrate edit product to inertia #3255

Are you sure you want to change the base?

Migrate edit product to inertia #3255

Uh oh!

Conversation

sahitya-chandra commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Problem

Solution

Before / After

Implementation notes

Test results

Checklist

AI Disclosure

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sahitya-chandra left a comment

Choose a reason for hiding this comment

Uh oh!

sahitya-chandra commented Feb 2, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sahitya-chandra commented Jan 30, 2026 •

edited

Loading